<template>
  <u-popup :show="isShow" round="8" @close="onClose">
    <view
      style="
        padding: 0 12px;
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 11px;
      "
    >
      <text style="font-size: 15px">模板列表</text>
    </view>
    <view style="padding: 12px; padding-bottom: 18px">
      <div
        v-for="item in tempList"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid lightgray;
          padding: 8px 0px;
        "
      >
        <span>{{ item.name }}</span>
        <u-button
          @click="confirm(item.value)"
          size="small"
          style="width: 63px; margin: 0"
          type="primary"
          >载入</u-button
        >
      </div>
    </view>
  </u-popup>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    isShow: {
      type: Boolean,
    },
    tempList: Array,
  },
  methods: {
    onClose() {
      this.$emit("cancel");
    },
    confirm(value) {
      this.$emit("confirm", value);
    },
  },
};
</script>
<style scoped lang="scss">
.primary {
  width: 111px;
  height: 52px;
  border-radius: 2px;
  background: #6f6f6f0d;
  margin-bottom: 16px;
}
.active {
  background: #007aff0d;
  border: 1px solid #007aff;
}
.active_text {
  color: #007affe6;
}
</style>
